<template>
	<!-- 我的活动-订单详情-待审核(等四个状态) -->
	<view>
		<!-- <view class="bg_top" :style="'height:'+(2*menuButtonInfo.top+48)+'rpx'"></view>
		<view class="top z_index" :style="'padding-top:'+ menuButtonInfo.top + 'px'">
			<u-icon @click="goNavigateBack" class="top_icon" name="arrow-left" color="#000000" size="40"></u-icon>
			<view class="top_title" >订单详情</view>
		</view> -->
		<view class="bg_"></view>
		
		<!-- <view class="content" :style="'padding-top:'+(2*menuButtonInfo.top+58)+'rpx'"> -->
		<view class="content">
			<view class="scroll_content">
				<view class="scroll_content_image">
					<image class="scroll_content_image_" :src="paramItem.imageList[0]" mode="aspectFill"></image>
				</view>
				<view class="scroll_content_">
					<view class="scroll_content_title">
						<!-- 活动标题活动标题活动标题活动活动标题活动 -->
						{{paramItem.activityName}}
					</view>
					<view class="scroll_content_icon" v-if="paramItem.categoryImage">
						<image class="scroll_content_icon_" :src="paramItem.categoryImage" mode="widthFix"></image>
						<!-- <text>{{paramItem.activityCategoryName}}12312</text> -->
					</view>
<!-- 					<view class="scroll_content_icon" v-else>
						<image class="scroll_content_icon_" src="https://z3.ax1x.com/2021/08/27/hMgjxO.png"></image>
						<text>{{paramItem.activityCategoryName}}</text>
					</view> -->
					
					<view class="scroll_content_time">
						<view>
							<view class="scroll_content_time_">
								<image class="scroll_content_time_icon" src="https://z3.ax1x.com/2021/08/27/hQDVdx.png"></image>
							</view>
							<view class="timeSlot">
								{{$Tools.startToEnd(paramItem.timeStart,paramItem.timeEnd)}}
							</view>
						</view>
						<view>
							<view class="scroll_content_time_">
								<image class="scroll_content_time_icon" src="https://z3.ax1x.com/2021/08/27/hQ6nHA.png"></image>
							</view>
							<view class="timeSlot address">
								{{paramItem.address}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="QRCode" v-if="paramItem.reviewStatus == 2 && paramItem.status != 10">
			<view>
				<image :src="paramItem.qrCode" mode="widthFix"></image>
				<view class="QRCode_text">{{this.$Tools.Cardformat(paramItem.orderNo)}}</view>
			</view>
			<view class="writtenOff" :class="paramItem.status != 20 ? ' writtenOff_a' : ' '">
			</view>
			<view class="writtenOff_" v-if="paramItem.status != 20">已核销</view>
		</view>
		
		<view class="relevant">
			<view class="relevant_1">
				<view class="relevant_current">当前状态</view>
				<view class="relevant_current_">
					<text>{{getState(paramItem.reviewStatus, paramItem.status)}}</text>
				</view>
			</view>
			<view class="relevant_1">
				<view class="relevant_current">报名编号</view>
				<view class="relevant_current_">No.{{paramItem.orderNo}}<text class="copy" @click="copy(paramItem.orderNo)">复制</text></view>
			</view>
			<view class="relevant_1">
				<view class="relevant_current">报名时间</view>
				<view class="relevant_current_">{{this.$Tools.setDate(paramItem.createTime, 1)}}</view>
			</view>
			<view class="relevant_1" v-if="paramItem.reviewTime">
				<view class="relevant_current">审核时间</view>
				<view class="relevant_current_">{{paramItem.reviewTime ? this.$Tools.setDate(paramItem.reviewTime, 1) : '-'}}</view>
			</view>
			
		</view>
		
		<view class="foot" v-if="paramItem.reviewStatus == 1">
			<view class="foot_1" @click="setUserActivityCancel">取消报名</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// menuButtonInfo: {
				// 	top: 25
				// },
				paramItem: []
			}
		},
		onLoad(param){
			this.init(param)
		},
		methods: {
			init(param) {
			
				console.log("paramItem", this.paramItem)
				this.$apis.userActivityInfo(param.orderNo).then(res => {
					console.log("获取成功", res)
					this.paramItem = res.data
				})
			},
			goNavigateBack() {
				uni.navigateBack()
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success:(res) => {
						uni.showToast({
							title: "复制成功",
							icon: 'none'
						})
					}
				})
			},
			//取消报名
			setUserActivityCancel() {
				this.$apis.userActivityCancel(this.paramItem.orderId).then(res => {
					uni.showToast({
						title: "取消成功",
						icon: "none",
						duration: 2000
					})
				})
			},
			getState(reviewStatus, status){
				if(reviewStatus == 1){
					return "待审核"
				}else if(reviewStatus == 2){
					if(status == 10){
						return "已取消"
					}else if(status == 20){
						return "待参加"
					}else{
						return "已完成"
					}
				}else{
					return "报名失败"
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.bg_top{
		width: 750rpx;
		background-color: #ffffff;
		position: fixed;
		z-index: 9;
	}
	.z_index{
		z-index: 10;
	}
	.top{
		width: 750rpx;
		height: 48rpx;
		background-color: #FFFFFF;
		position: fixed;
		padding-bottom: 20rpx;
	}
	.top_icon{
		margin-left: 32rpx;
		display: inline-block;
	}
	.top_title{
		position: absolute;
		font-size:34rpx;
		font-weight: 500;
		line-height: 48rpx;
		display: inline-block;
		left: 50%;
		transform: translate(-50%);
	}
	.bg_{
		background: #f5f6f8;
		width: 750rpx;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: -1;
	}
	.content{
		width: 750rpx;
		// height: 226rpx;
		background-color: #FFFFFF;
	}

	.scroll_content{
		padding-top: 40rpx;
		margin-left: 40rpx;
		// height: 226rpx;
		width: 710rpx;
	}
	.scroll_content_image{
		display: inline-block;
		margin-right: 30rpx;
		vertical-align: top;
		padding-bottom: 40rpx;
	}
	.scroll_content_image_{
		width: 160rpx;
		height: 226rpx;
		border-radius: 12rpx;
	}
	.scroll_content_{
		// width: 480rpx;
		display: inline-block;
	}
	.scroll_content_title{
		// width: 332rpx;
		width: 392rpx;
		height: 88rpx;
		color: #2d3034;
		font-weight: 700;
		font-size: 30rpx;
		margin-right: 26rpx;
		display: inline-block;
		vertical-align: top;
	}
	.scroll_content_icon{
		width: 62rpx;
		height: 32rpx;
		position: relative;
		display: inline-block;
		text{
			width: 62rpx;
			height: 32rpx;
			position: absolute;
			left: 16rpx;
			top: 3rpx;
			color: #e63018;
			font-size: 20rpx;
		}
	}
	.scroll_content_icon_{
		width: 62rpx;
		height: 32rpx;
	}
	.scroll_content_time{
		// margin-top: 54rpx;
		width: 480rpx;
		height: 64rpx;
	}
	.scroll_content_time_{
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
		display: inline-block;
	}
	.scroll_content_time_icon{
		width: 100%;
		height: 100%;
	}
	.timeSlot{
		width: 448rpx;
		height: 28rpx;
		display: inline-block;
		font-size: 22rpx;
		font-weight: 400rpx;
		color: #606266;
		// background-color: red;
	}
	.address{
		font-size: 20rpx;
	}
	.QRCode{
		margin-top: 20rpx;
		width: 750rpx;
		height: 630rpx;
		background-color: #FFFFFF;
		text-align: center;
		position: relative;
	}
	.writtenOff{
		width: 750rpx;
		height: 630rpx;
		
		position: absolute;
		top: 0;
	}
	.writtenOff_a{
		opacity: 0.2;
		background-color: #000000;
	}
	.writtenOff_{
		width: 188rpx;
		height: 94rpx;
		background-color: #FFFFFF;
		font-weight: 700;
		font-size: 36rpx;
		line-height: 94rpx;
		color: #2d3034;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		    // transform: translateY(-40rpx);
	}
	.QRCode_image{
		margin-top: 80rpx;
		width: 429rpx;
		// height: 429rpx;
	}
	.QRCode_text{
		color: #606266;
		font-size: 26rpx;
		font-weight: 400;
		transform: translateY(-40rpx);
	}
	.relevant{
		width: 670rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 40rpx;
	}
	.relevant_1{
		width: 670rpx;
		padding-bottom: 40rpx;
	}
	.relevant_current{
		width: 170rpx;
		color: #606266;
		font-size: 26rpx;
		display: inline-block;
	}
	.relevant_current_{
		width: 500rpx;
		display: inline-block;
		text-align: right;
		color: #2d3034;
		font-size: 26rpx;
	}
	.copy{
		margin-left: 12rpx;
		color: #f10200;
		font-weight: 500;
	}
	.foot{
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		border-top: 2rpx solid #e1e3e5;
	}
	.foot_1{
		width: 670rpx;
		height: 84rpx;
		margin: 16rpx 40rpx 86rpx 40rpx;
		line-height: 84rpx;
		border: 2rpx solid #e1e3e5;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 700;
		text-align: center;
	}
</style>
